<template>
  <div id="main" style="width:300px;height:300px"></div>
<!--  <div class="sexAgeCard" v-if="show">-->
<!--   -->
<!--    <a-row :gutter="24">-->
<!--      <div class="tj-title">-->
<!--        <h2>消费排名</h2>-->
<!--      </div>-->
<!--    </a-row>-->
<!--    <a-row :gutter="24">-->
<!--      <a-col :sm="24" :md="24" :xl="12" class="sex">-->
<!--        <v-chart :force-fit="true" :height="height" :data="dataRank" :scale="scaleRank">-->
<!--          <v-tooltip />-->
<!--          <v-axis />-->
<!--          <v-legend />-->
<!--          <v-line position="nickName*temperature" color="city" />-->
<!--          <v-point position="nickName*temperature" color="city" :size="4" :v-style="style" :shape="'circle'" />-->
<!--        </v-chart>-->
<!--      </a-col>-->
<!--      <a-col :sm="24" :md="24" :xl="12" class="age">-->
<!--        <v-chart :force-fit="true" :height="height" :data="dataTimes" :scale="scaleTimes">-->
<!--          <v-tooltip />-->
<!--          <v-axis />-->
<!--          <v-legend />-->
<!--          <v-line position="nickName1*temperature" color="city" />-->
<!--          <v-point position="nickName1*temperature" color="city" :size="4" :v-style="style" :shape="'circle'" />-->
<!--        </v-chart>-->
<!--      </a-col>-->
<!--    </a-row>-->
<!--  </div>-->

</template>
<script>
  let echarts = require('echarts/lib/echarts')
  //引入条形图
  require('echarts/lib/chart/line')
  //引入提示框和标题组件
  require('echarts/lib/component/tooltip')
  require('echarts/lib/component/title')
  import { getConsumeRank,getConsumeTimes } from '../../api/dashboard/chartData'
  const DataSet = require('@antv/data-set');

  const sourceData = [
    /*{ month: 'Jan', Tokyo: 37.0, London: 3.9 },
    { month: 'Feb', Tokyo: 6.9, London: 4.2 },
    { month: 'Mar', Tokyo: 9.5, London: 5.7 },
    { month: 'Apr', Tokyo: 14.5, London: 8.5 },
    { month: 'May', Tokyo: 18.4, London: 11.9 },
    { month: 'Jun', Tokyo: 21.5, London: 15.2 },
    { month: 'Jul', Tokyo: 25.2, London: 17.0 },
    { month: 'Aug', Tokyo: 26.5, London: 16.6 },
    { month: 'Sep', Tokyo: 23.3, London: 14.2 },
    { month: 'Oct', Tokyo: 18.3, London: 10.3 },
    { month: 'Nov', Tokyo: 13.9, London: 6.6 },
    { month: 'Dec', Tokyo: 9.6, London: 4.8 },*/
  ];

  const dv = new DataSet.View().source(sourceData);
  dv.transform({
   /* type: 'fold',
    fields: ['Tokyo', 'London'],
    key: 'city',
    value: 'temperature',*/
  });
  const data = dv.rows;

  const scale = [{
    /*dataKey: 'month',
    min: 0,
    max: 1,*/
  }];

  /*动态数据*/
  let scaleRank;
  let dataRank;
  let scaleTimes;
  let dataTimes;
  export default {
    data() {
      return {
        data,
        scale,
        dataRank,
        scaleRank,
        dataTimes,
        scaleTimes,
        show:true,
        height: 400,
        style: { stroke: '#fff', lineWidth: 1 },
      };
    },
    props: ['companyid'],
    created() {
      this.getConsumeRankData()
    },
    methods: {
      drawLine(){
        let myChart = echarts.init(document.getElementById('main'));
        myChart.setOption({
          title: {
            text: 'ECharts 入门示例'
          },
          tooltip: {},
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line'
          }]
        });
      },
      getConsumeRankData: function(companyId) {
        const body = {
          companyId: companyId != null ? companyId : this.companyid
        }
        // 取值男女 年龄段
        const DataSet = require('@antv/data-set')
        getConsumeRank(body).then(res => {
          if (res.code === 200) {
            this.show = true
            let sourceData1 = []
            let obj = res.result.list;
              for (let i in obj) {
                sourceData1.push({
                  nickName: obj[i].nickName==null?"匿名":obj[i].nickName,
                  "消费金额": obj[i].feeSum
                })
              }
            console.log(sourceData1);
            const dv = new DataSet.View().source(sourceData1);
            dv.transform({
              type: 'fold',
              fields: ['消费金额'],
              key: 'city',
              value: 'temperature',
            });
            this.dataRank = dv.rows;
            this.scaleRank = [{
              dataKey: 'nickName',
              min: 0,
              max: 1
            }];
          } else {
            this.show = false
            this.$notification.error({
              message: '错误',
              description: res.message,
              duration: 4
            })
          }
        })

        getConsumeTimes(body).then(res => {
          if (res.code === 200) {
            console.log("获取消费次数排名");
            let sourceData = []
            let obj = res.result.list;
            for (let i in obj) {
              sourceData.push({
                nickName1: obj[i].nickName==null?"":obj[i].nickName,
                '消费名次': obj[i].feeTimes
              })
            }
            console.log(sourceData);
            const DataSet = require('@antv/data-set')
            const dv = new DataSet.View().source(sourceData);
            dv.transform({
              type: 'fold',
              fields: ['消费名次'],
              key: 'city',
              value: 'temperature',
            });
            this.dataTimes = dv.rows;
            this.scaleTimes = [{
              dataKey: 'nickName1'
            }];
          } else {
            this.show = false
            this.$notification.error({
              message: '错误',
              description: res.message,
              duration: 4
            })
          }
        })
      }
    },
    mounted() {
      this.$nextTick(function() {
        this.drawLine();
      })


    }
  };
</script>

<style scoped lang="less">

  .tj-title {
    width: 100%;
    padding: 0 20px;

    h2 {
      line-height: 60px;
    }
  }

</style>